<template>
  <!--  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    title="叫号"
  >
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
    <div class="call bs-bb">
      <div class="top pt-re p-2 bs-bb">
        <div class="head f-row ai-c">
          <el-avatar :size="50"  :src="
        login_info.face ||
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      "></el-avatar>
          <div class="tro ml-1 f-column js-sb">
            <div class="name">{{login_info.realName}}</div>
            <div class="hospital">{{ login_info.siteName || "未更新" }}</div>
          </div>
        </div>
        <div class="current-jz f-row ai-c jc-c">
          <img src="../../assets/images/others/jz-left.png" alt="" />

          <span> 当前就诊</span>
          <img src="../../assets/images/others/jz-right.png" alt="" />
        </div>
        <div class="btn_box txt-c">
          <div class="btn1">{{ currentCall? currentCall.name : "暂无" }}</div>
          <div class="grid2">
            <div 
              @click="passCallFn"
            :class="[currentCall ? 'btn4' : 'btn2']">
              过号</div>
            <div 
             @click="startCallFn"
            :class="[currentCall ? 'btn4' : 'btn3']">开始</div>
          </div>
          <div class="grid2">
            <div :class="[currentCall  ? 'btn4' : 'btn2']">重呼</div>
            <div 
            @click="nextCallFn"
            :class="[currentCall ? 'btn5' : 'btn2']">下一个</div>
          </div>
        </div>
      </div>
      <img src="../../assets/images/others/jz-line.png" alt="" />
      <div class="btm p-2 bs-bb">
        <div class="clearfix f-row ai-c">
          <div
            :class="['title', callStatus == 1 ? 'active' : '']"
            @click="$emit('tabStatus', 1)"
          >
            等待中（{{ callData?.waiting }}）
          </div>
          <div
            :class="['title', callStatus == 5 ? 'active' : '']"
            @click="$emit('tabStatus', 5)"
          >
            已过号（{{ callData?.miss }}）
          </div>

          <div
            :class="['title', callStatus == 3 ? 'active' : '']"
            @click="$emit('tabStatus', 3)"
          >
            已就诊（{{ callData?.complete }}）
          </div>
        
        </div>
        <div class="tab_box">
          <el-table 
          @selection-change="handleSelectionChange"
          :data="callData?.result" border style="width: 100%">
            <el-table-column type="selection"> </el-table-column>
            <el-table-column type="index" label="排队序号"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.sex == 1 ? "男" : "女" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span @click="fn(scope.row)" class="hujiao">
                  {{ scope.row.status == 1 ? "等待呼叫" : "呼叫中" }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    </el-dialog> -->

  <div v-if="dialogVisible" class="call_box_aa">
    
    <div class="call bs-bb">
      <div class="top pt-re p-2 bs-bb">
        <div class="head f-row ai-c">
          <el-avatar
            :size="50"
            :src="
              login_info.face ||
              'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            "
          ></el-avatar>
          <div class="tro ml-1 f-column js-sb">
            <div class="name">{{ login_info.realName }}</div>
            <div class="hospital">{{ login_info.siteName || "未更新" }}</div>
          </div>
        </div>
        <div class="current-jz f-row ai-c jc-c">
          <img src="../../assets/images/others/jz-left.png" alt="" />

          <span> 当前就诊</span>
          <img src="../../assets/images/others/jz-right.png" alt="" />
        </div>
        <div class="btn_box txt-c cp">
          <div class="btn1">{{ currentCall ? currentCall.name : "暂无" }}</div>
          <div class="grid2">
            <div @click="passCallFn" :class="[currentCall ? 'btn4' : 'btn2']">
              过号
            </div>
            <div @click="startCallFn" :class="[currentCall ? 'btn4' : 'btn3']">
              开始
            </div>
          </div>
          <div class="grid2">
            <div :class="[currentCall ? 'btn4' : 'btn2']" @click="replaceCallFn">重呼</div>
            <div @click="nextCallFn" :class="[currentCall ? 'btn5' : 'btn2']">
              下一个
            </div>
          </div>
        </div>
      </div>
      <img src="../../assets/images/others/jz-line.png" alt="" />
      <div class="btm p-2 bs-bb">
        <div class="clearfix f-row ai-c">
          <div
            :class="['title', callStatus == 1 ? 'active' : '']"
            @click="$emit('tabStatus', 1)"
          >
            等待中（{{ callData?.waiting }}）
          </div>
          <div
            :class="['title', callStatus == 5 ? 'active' : '']"
            @click="$emit('tabStatus', 5)"
          >
            已过号（{{ callData?.miss }}）
          </div>

          <div
            :class="['title', callStatus == 3 ? 'active' : '']"
            @click="$emit('tabStatus', 3)"
          >
            已就诊（{{ callData?.complete }}）
          </div>
        </div>
        <div class="tab_box">
          <el-table
            @selection-change="handleSelectionChange"
            :data="callData?.result"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="排队序号"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.sex == 1 ? "男" : "女" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span @click="fn(scope.row)" class="hujiao">
                  {{ scope.row.status == 1 ? "等待呼叫" : (scope.row.status == 2?'呼叫中':"已完成") }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div 
    class="f-row jc-fe dialog-footer bs-bb pr-3 pb-2"
    slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus.js";
export default {
  props: {
    dialogVisible: Boolean,
    visitType: {
      //就诊类型  1 正在就诊 2暂无就诊
      type: Number,
      default: 2,
    },
    callData: Object, //叫号器列表数据
    callStatus: Number,
    currentCall: Object, //当前叫号数据
  },
  computed: {
    ...mapState(["login_info"]),
  },
  data() {
    return {
      jzId: 1,
      typeList: [
        {
          id: 1,
          name: "等待中",
          num: 88,
        },
        {
          id: 2,
          name: "就诊中",
          num: 88,
        },
        {
          id: 3,
          name: "已过号",
          num: 88,
        },
      ],
    };
  },
  methods: {
    //重呼
    replaceCallFn(){
       this.$emit("replaceCall");
    },
    //下一个
    nextCallFn() {
      this.$emit("nextCall");
    },
    //开始
    startCallFn() {
      this.$emit("startCall");
    },
    //过号
    passCallFn() {
      this.$emit("passCall");
    },
    //关闭弹框
    handleClose() {
      Bus.$emit("closeCall");
    },
    //选择tab
    choiceTab(i) {
      this.jzId = i;
    },
    //勾选
    handleSelectionChange(val) {
      console.log(val);
      /*   this.multipleSelection = val; */
    },
  },
};
</script>
<style lang="less" scoped>
.call_box_aa{
  position: fixed;
  left: 0rem;
  top:0rem;
  z-index: 999;
  background-color: #f1f1f1;
  border:.125rem solid #f3f3f3; 
}
/deep/ .el-dialog__header {
  display: none;
}
.hujiao {
  font-size: 0.875rem;
  color: #176eff;
}
.tab_box {
  /*  overflow-y: scroll; */
  min-width: 30rem;
  height: 12.8125rem;
}
.clearfix {
  width: 100%;
  border-bottom: 1px solid #d6d6d6;
  margin-bottom: 0.625rem;
  .title {
    color: #838383;
    letter-spacing: 0.125rem;
    margin-right: 1rem;
    padding-bottom: 1.125rem;
    cursor: pointer;
  }
  .active {
    color: var(--themeCOlor);
    border-bottom: 2px solid var(--themeCOlor);
    font-weight: 600;
  }
}
.btn_box {
  font-size: 1.125rem;
  display: grid;
  grid-row-gap: 0.9375rem;
  div {
    border-radius: 0.3125rem;
    color: #fff;
    line-height: 2.5rem;
  }
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0.75rem;
}
.btn4 {
  background: #fd5151;
}
.btn2 {
  background: #bbbbbb;
}
.btn3 {
  background: var(--themeCOlor);
}
.btn5 {
  background: #fa6419;
}
.btn1 {
  background: #459df5;
}
.current-jz {
  img {
    width: 4.8125rem;
    height: 0.125rem;
  }
  span {
    margin: 0.8125rem 0.5rem 0.625rem;
  }
}
.call {
  /*    min-width: 440px; */
  min-width: 31.875rem;
}
.call > img {
  width: 100%;
  height: 0.0625rem;
}
.top {
  width: 100%;
  .tro {
    .name {
      font-size: 1.125rem;
      color: #333333;
    }
    .hospital {
      color: #666666;
      font-size: 0.875rem;
    }
  }
}
.el-table {
  overflow-y: scroll;
  min-width: 31.875rem;
  height: 100%;
}
</style>